<template>
  <view>
    <view >
      <u-navbar title="工单详情" id="container" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
        title-size="37" />
      <RepairWorkOrderToAcceptInfo v-if="status === TO_ACCEPT.value && mode === TO_ACCEPT_MODE.VIEW"
                                   :work-order-id="workOrderId"
                                   @edit="mode = TO_ACCEPT_MODE.EDIT"/>
      <RepairWorkOrderToAcceptForm v-if="status === TO_ACCEPT.value && mode === TO_ACCEPT_MODE.EDIT"
                                   :work-order-id="workOrderId"
                                   @cancel="mode = TO_ACCEPT_MODE.VIEW"
                                   @confirm="mode = TO_ACCEPT_MODE.VIEW"
                                   />
      <RepairWorkOrderSeekHelpInfo v-if="status == SEEK_HELP.value"
                                   :work-order-id="workOrderId"
                                   :top="top"/>
    </view>
  </view>
</template>

<script>
import getNavBarHeight from "@/mixins/getNavBarHeight";
import RepairWorkOrderToAcceptInfo from '@/pages/repair/components/RepairWorkOrderToAccept/info'
import RepairWorkOrderToAcceptForm from '@/pages/repair/components/RepairWorkOrderToAccept/form'
import RepairWorkOrderSeekHelpInfo from '@/pages/repair/components/RepairWorkOrderSeekHelp/info'
import { REP_WORK_ORDER_STATUS } from "@/utils/dict"

const TO_ACCEPT_MODE = {
  VIEW: 'view',
  EDIT: 'edit'
}

export default {
  name: "FixReceiveOrderDetail",
  mixins: [getNavBarHeight],
  components: {RepairWorkOrderToAcceptInfo, RepairWorkOrderToAcceptForm, RepairWorkOrderSeekHelpInfo},
  onLoad (options) {
    this.status = options.status || ''
    this.workOrderId = options.workOrderId || ''
    this.mode = TO_ACCEPT_MODE.VIEW
  },
  computed: {
    TO_ACCEPT() {return REP_WORK_ORDER_STATUS.TO_ACCEPT},
    SEEK_HELP() {return REP_WORK_ORDER_STATUS.SEEK_HELP},
    TO_ACCEPT_MODE() {return TO_ACCEPT_MODE}
  },
  data () {
    return {
      workOrderId: '',
      status: '',
      mode: TO_ACCEPT_MODE.VIEW
    }
  },
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss">
.edit {
  background: rgba(45, 140, 240, 0.1);
  border-radius: 5rpx;
  opacity: 1;
  border: 1rpx solid #2D8CF0;
  color: #2D8CF0;
}

/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}

/deep/ .u-collapse-head {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0 !important;
  padding-bottom: 30rpx !important;
  padding-top: 20rpx !important;
}
</style>
